<template>
  <div>
    <!-- <swiper :options="swiperOption" ref="mySwiper" @slideChangeTransitionEnd="keepSlide" style="text-align:center">
      <swiper-slide style="height:472px;width:100%;overflow:hidden" v-for="(slide, index) in swiperSlides" :key="index" :style="{backgroundColor:'#'+slide.backgroundcolour}">
        <a :href="slide.link">
          <img style="width:1200px" :src="slide.url" alt="" srcset="">
        </a>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper> -->
    <!-- 轮播图 -->
    <div class="banner-wrapper" @mouseover='moveEnter' @mouseout='moveOut'>
      <transition-group mode="out-in" name="flip-list" tag="ul">
        <li v-for="(item, index) in bannerArr" :key="index" v-show="index==flagIdx" :style='`background-color: #${item.backgroundcolour}`' class="list-item">
          <a :href="item.link">
            <img :src="item.url">
          </a>
        </li>
      </transition-group>
      <div class="little-dot">
        <span class="dot"  v-for="(item, index) in bannerArr" :key="index+'dot'">
          <i @click="changeDot(index)" :class="{on: index==flagIdx}" class="item"></i>
        </span>
      </div>
    </div>
    <div class="courseSection">
      <courseSection v-for="(item, index) in courseArr" :key="index" :courseSet="item"></courseSection>
    </div>
    <div class="teach-power">
      
      <teach-power></teach-power>
    </div>
    <indexSideBar></indexSideBar>
  </div>
</template>

<script>
import {
  city,
  banner,
  homeCourseByCity,
  infoByTel
} from 'api/getData';

import courseSection from 'basic/homesource/home-course';
import teachPower from './teachPower';
import indexSideBar from 'basic/start/sideBar'
import {
  mapGetters,
  mapActions
} from 'vuex';
import 'swiper/dist/css/swiper.css'
import {
  swiper,
  swiperSlide
} from 'vue-awesome-swiper'


export default {
  components: {
    courseSection,
    indexSideBar,
    swiper,
    swiperSlide,
    teachPower
  },
  data() {
    return {
      cityArr: [],
      // 轮播数据
      flagIdx: 0,

      bannerBgC: 'background-color:#d3dce7',
      bannerArr: [],
      courseArr: [],
      timer: '',
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        effect: 'fade',
        fadeEffect: {
          crossFade: false,
        },
        autoplay: {
          delay: 4000
        }
      },
      swiperSlides: []
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'cityId', 'currentUser']),
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    this.getCity();
    this.getBanner();
    this.setUserStatus();
    this.startChange();
  },
  methods: {
    ...mapActions(['setCity', 'setUser']),
    setUserStatus() {
      if (this.isLogin) {
        infoByTel(this.currentUser.account).then(res => {
          this.currentUser.type = res.data.type;
          this.currentUser.cluesOrStuId = res.data.cluesOrStuId;
          this.setUser(this.currentUser)
        })
      }
    },
    keepSlide() {
      this.swiper.autoplay.start();
    },
    getCity() {
      let that = this;
      city().then(res => {
        that.cityArr = res.cityList;
        that.getCourse();
      })
    },
    getBanner() {
      banner(this.cityId).then(res => {
        if(res.bannerList.length == 0){
          return
        }
        this.swiperSlides = this.bannerArr = res.bannerList;
        this.bannerBgC = 'background-color:#' + this.bannerArr[0].backgroundcolour;
      })
    },
    // 轮播函数
    startChange () {
        var _this = this;
        _this.timer=setInterval(function () {
            if (_this.flagIdx < _this.bannerArr.length - 1) {
                _this.flagIdx++
            } else {
                _this.flagIdx = 0
            }
        }, 5000);
    },
    // 鼠标进入函数
    moveEnter(){
      clearInterval(this.timer)
    },
    // 鼠标移出函数
    moveOut(){
      this.startChange()
    },
    // 小圆点切换函数
    changeDot(index){
      this.flagIdx = index
    },
    getCourse() {
      if(this.cityId){
        homeCourseByCity(this.cityId).then(res => {
        this.courseArr.length = 0;
        this.courseArr = res.floorList; //目前是获取全部，所以只取数组第一个
        })
      }
    }
  },
  watch: {
    cityId() {
      this.getBanner();
      this.getCourse();
    }
  }
};

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';

.carousel-content {
  @extend .sWidth;

  /* Opera */
  img {
    width: 100%;
    height: 472px;
  }
}
// 轮播图样式
.banner-wrapper{
  position: relative;
  width: 100%;
  height: 472px;
  ul{
    position: relative;
    width: 100%;
    height: 472px;
    li{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      a{
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        img{
          height: 100%;
          width: 1200px;
        }
      }
    }
  }

  .little-dot{
    position absolute
    bottom 10px
    height 20px
    width 100%
    text-align center
    .dot{
      display inline-block
      width 30px
      height 10px
      text-align left
      line-height 10px
      text-align center
      .item{
        display inline-block
        width 10px
        height 10px
        border-radius 10px
        background-color rgba(255, 255, 255, 0.5)
        transition all .2s
        cursor pointer
      }
      .on{
        width 25px
        background-color rgba(255, 255, 255, 1)
      }
    }

  }

}

.flip-list-enter-active, .flip-list-leave-active {
    transition: all 0.8s;
}
.flip-list-enter, .flip-list-leave-active {
    opacity: 0;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 500px;
  margin: 0;
}

.courseSection {
  @extend .sWidth;
  margin-top: -8px;
  margin-bottom: 60px;
}
.teach-power {
  @extend .sWidth;
  margin-bottom: 120px;
}
</style>
